<template>
  <div class="dashboard-container" >
    <div class="dashboard-text">
      个人信息管理
    </div>
    <div style="margin-left: 100px;margin-top: 50px">
      <el-form label-width="20%" :rules="userRoles" :model="addUserList" ref="ruleForm">
        <el-form-item label="用户名"  prop="userName">
          <el-input v-model="addUserList.userName" maxlength="20" show-word-limit style="width: 80%"
                    clearable placeholder="请输入用户名称"/>
        </el-form-item>
        <el-form-item label="密码"  prop="userPassword">
          <el-input v-model="addUserList.userPassword" maxlength="20" show-word-limit style="width: 80%"
                    clearable placeholder="请输入用户密码"/>
        </el-form-item>
        <el-form-item label="性别"  prop="sex">
          <el-input v-model="addUserList.sex" maxlength="1" show-word-limit style="width: 80%"
                    clearable placeholder="请输入性别"/>
        </el-form-item>
        <el-form-item label="电话"  prop="phoneNumber">
          <el-input v-model="addUserList.phoneNumber" maxlength="11" show-word-limit style="width: 80%"
                    clearable placeholder="请输入电话号码"/>
        </el-form-item>
        <el-form-item label="身份证"  prop="identificationCard">
          <el-input v-model="addUserList.identificationCard" maxlength="18" show-word-limit style="width: 80%"
                    clearable placeholder="请输入身份证号"/>
        </el-form-item>
        <el-form-item label="备注"  prop="remark">
          <el-input v-model="addUserList.remark" maxlength="20" show-word-limit style="width: 80%"
                    clearable placeholder="请输入备注"/>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="updateUser('ruleForm')"
                 style="margin-left: 500px">保存
      </el-button>
      <el-button style="margin-left: 200px" @click="check">重置</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectAllUser, updateByUser } from '@/api/user'

export default {
  name: 'Users',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  // 页面参数
  data() {
    return {
      userId: this.$store.getters.userId,
      userName: this.$store.getters.userName,
      roleName: this.$store.getters.roleName,
      addUserList: {
        userTableId: '',
        userId: '',
        roleId: '',
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        identificationCard: '',
        remark: ''
      },
      userRoles: {
        userName: [
          { required: true, trigger: 'blur', message: '用户名不能为空' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, trigger: 'blur', message: '用户密码不能为空' },
          { min: 6, max: 20, message: '长度在 6 到 60 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, trigger: 'blur', message: '性别不能为空' },
          { min: 1, max: 1, message: '性别只能是一位且必须是男或者女', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, trigger: 'blur', message: '电话号码不能为空' },
          { min: 11, max: 11, message: '请输入合法的电话号码', trigger: 'blur' }
        ],
        identificationCard: [
          { required: true, trigger: 'blur', message: '身份证号不能为空' },
          { min: 18, max: 18, message: '请输入合法身份证号', trigger: 'blur' }
        ]
      }
    }
  },
  // 页面初始化加载方法
  mounted() {
    this.selectAll()
  },
  // 页面内事件和方法
  methods: {
    selectAll() {
      selectAllUser({
        userId: this.userId,
        userName: this.userName,
        roleName: this.roleName
      }).then(
        response => {
          this.addUserList = response.data[0]
        }
      )
    },
    check() {
      this.selectAll()
    },
    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateByUser({
            userTableId: this.addUserList.userTableId,
            userId: this.addUserList.userId,
            roleId: this.addUserList.roleId,
            userName: this.addUserList.userName,
            userPassword: this.addUserList.userPassword,
            sex: this.addUserList.sex,
            phoneNumber: this.addUserList.phoneNumber,
            identificationCard: this.addUserList.identificationCard,
            remark: this.addUserList.remark,
          }).then(
            async response => {
              this.userName = this.addUserList.userName
              // console.log(this.$store.getters.userName)
              // await this.$store.dispatch('user/getInfo')  // 重新获取用户信息（后端暂未刷新该信息）
              // console.log(this.$store.getters.userName)
              this.selectAll()
            }
          )
        } else {
          return false;
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
